import React, { useState, DragEvent } from "react";
import classNames from "classnames";

interface IDraggerProps {
    onFile: (files: FileList) => void;
    children: React.ReactNode;
}
const Dragger: React.FC<IDraggerProps> = (props) => {
    const { onFile, children } = props;
    const [dragOver, setDragOver] = useState<boolean>(false);
    const classes = classNames("uploader-dragger", {
        "is-dragover": dragOver,
    });
    // 处理拖动
    const handleDrag = (e: DragEvent<HTMLElement>, over: boolean) => {
        e.preventDefault();
        setDragOver(over);
    }
    // 拖动结束
    const handleDrop = (e: DragEvent<HTMLElement>) => {
        e.preventDefault();
        setDragOver(false);
        // 传送数据
        onFile(e.dataTransfer.files);
    }
    return (
        <div
            className={classes}
            onDragOver={e => { handleDrag(e, true) }}
            onDragLeave={e => { handleDrag(e, false) }}
            onDrop={handleDrop}
        >
            <p className="explain">拖动上传文件</p>
            {children}
        </div>
    );
}
export default Dragger;